import { useRoutes, Navigate } from 'react-router-dom'
import './App.css'
import Header from './component/Header'
import Footer from './component/Footer'
import Content from './component/Content'
import Login from './component/Function/Login'
import Register from './component/Function/Register'
import Details from './component/Function/Details/Details'
import Admin from './component/Function/Admin/Admin'
import Individual from './component/Function/Individual/Individual'
const routes = [
  {
    path: '/',
    element: <Navigate to="Home" />
  },
  {
    path: '/home',
    element: <Content />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/register',
    element: <Register />
  },
  {
    path: '/admin',
    element: <Admin />
  },
  {
    path: '/individual',
    element: <Individual />
  },
  {
    path: 'details/:category/:name/:id',
    element: <Details />,
    // children: [
    //   {
    //     path: 'details/:id/:title/:content',
    //     element: <ParamsRouteChild />
    //   }
    // ]
  },
  // {
  //     path: '/TransVaule/*',
  //     element: <TransVaule />
  // },
  // {
  //     path: '/UseNavigateComponent',
  //     element: <UseNavigateComponent />,
  //     children: [
  //         {
  //             path: 'detail',
  //             element: <UseNavigateDetail />
  //         },
  //         {
  //             path: 'NavigateComponent',
  //             element: <NavigateComponent />
  //         },
  //     ]
  // },
]
function App() {
  const element = useRoutes(routes)
  return (
    <div className="App">
      <Header/>
      <div>
        {element}
      </div>
      <Footer/>
    </div>
  )
}

export default App
